import { /** postDecisionFlowPage, */ postDecisionListWithCategory } from '@/api';
// import { MciSelect } from '@/components/base';
import { ElCascader } from 'element-plus';

export const DecisionFilter = defineComponent({
  emits: ['refreshList'],
  setup(props, { emit }) {
    // const decisionVals = ref([]);
    const decisionVals = ref<any[]>([]);
    // const flowList = ref<any[]>([]);
    // const decisionProps = { multiple: true, value: 'id', label: 'categoryName', children: 'flows', emitPath: false }; // 二级级联
    const decisionProps = { multiple: true, value: 'id', label: 'categoryName', children: 'decisionFlows', emitPath: false }; // 三级级联
    const options = ref<any[]>([]);
    const ID_ALL='0';

    onMounted(async () => {
      // const list = (await postDecisionFlowPage({ pageNo: 1, pageSize: 100 }))?.list || [];
      // const data = await postDecisionListWithCategory();
      // const dataOptions = list.map((item: any) => {
      //   return {
      //     value: item.id,
      //     label: item.flowName
      //   };
      // });
      // flowList.value = dataOptions;
      // decisionVals.value = dataOptions && dataOptions.length > 0 ? dataOptions[0].value : '';
    });

    let leafMap: any = {};

    const traverseTree = (node: any) => {
      if (!node) {
        return;
      }
      node.categoryName = node.categoryName || node.flowName;
      node.decisionFlows = node.decisionFlows?.map(item => {
        return {
          ...item,
          categoryName: item.flowName + '（' + item.versionNo + '）',
        }
      }) || node.flows ; // 当前版本显示第三级
      if (node.flows && node.flows.length > 0) {
        for (const child of node.flows) {
          traverseTree(child);
        }
      }
      // else {
        // decisionVals.value.push(node.id);
      // }

      if (node.decisionFlows) {
        const ids = [];
        for (const child of node.decisionFlows) {
          ids.push(child.id);
        }
        leafMap[node.id] = ids;
      }
    };

    const mergeIds = (arr: any[]) => {
      let ids: any = [];
      if (arr) {
        for (const id of arr) {
          if (id && leafMap[id] && leafMap[id].length) {
            ids = [ids, ...leafMap[id]];
          }
        }
      }
      return ids;
    };

    const categoryRequest = async () => {
      // let list :any[] = [];
      const data = await postDecisionListWithCategory();
      if (data) {
        for (const iterator of data) {
          if (iterator) {
            traverseTree(iterator);
          }
        }
        // const root = {
        //   id: ID_ALL,
        //   categoryName: '全部',
        //   flows: data
        // };
        // list.push(root);
      }

      options.value = data;
      // emit('refreshList', decisionVals.value);
      emit('refreshList', mergeIds(decisionVals.value));
    };
    categoryRequest();

    // 选中改变回调
    const handleChange = (val: any) => {
      const arr = [];
      for (const iterator of val) {
        arr.push(iterator);
      }
      // emit('refreshList', arr);
      emit('refreshList', mergeIds(arr));
    };

    return () => (
      <>
        <ElCascader
          style={{ width: '300px' }}
          modelValue={decisionVals.value}
          options={options.value}
          props={decisionProps}
          collapse-tags={true}
          collapse-tags-tooltip={true}
          onChange={handleChange}
          max-collapse-tags={1}
          show-all-levels={false}
        />
        {/* <MciSelect v-model={decisionVals.value} clearable list={flowList.value} placeholder="请选择" /> */}
      </>
    );
  }
});
